import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateTypeAction } from '../store/action/todo';

export default function Footer() {
  const { list, type } = useSelector((state) => state.todo);
  const restLen = list.filter((item) => !item.isDone).length;
  const dispatch = useDispatch();
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{restLen}</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => dispatch(updateTypeAction('all'))}
            className={type === 'all' ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => dispatch(updateTypeAction('active'))}
            className={type === 'active' ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => dispatch(updateTypeAction('completed'))}
            className={type === 'completed' ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
